<template>
    <div class="container">
        <div class="equity-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link :to="{ path: '/partner/company', query: { id: id }}">企业管理 / </router-link>
                <router-link :to="{ path: '/partner/companyDetail', query: { id: id }}">{{name?name:'--'}}/ </router-link>
                投融资信息
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="equity-wrap">
                <div class="wrap">
                <!--<div class="title-head">-->
                    <!--&lt;!&ndash;待办事项：您好，你本期财务信息尚未提交，<span>点击此处</span>提交财务信息&ndash;&gt;-->
                <!--</div>-->
                <div class="wrap-container">
                    <div class="title">投融资信息
                        <div @click="addBtn" class="btn">添加</div>
                        <div style="float:right;font-size:14px;position:relative;top:10px;" class="tip-edit">请填写公司曾经发生过的所有投融资事件信息。如果没有，可无需填写。</div>
                    </div>
                    <div class="table-wrap">
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column label="股东名称" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.otherMaster?scope.row.otherMaster:scope.row.masterTypeDesc}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="giveNums"
                            align="center"
                            label="出资额(元)">
                            </el-table-column>
                            <el-table-column
                            label="出资比例(%)"
                            align="center"
                            prop="stockRate">
                            </el-table-column>  
                            <el-table-column
                            prop="giveTypeDesc"
                            align="center"
                            label="出资方式">
                            </el-table-column>
                            <el-table-column label="融资时间" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.financeDate?scope.row.financeDate.split(' ')[0]:'--'}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="financeLevelDesc"
                            align="center"
                            label="融资阶段">
                            </el-table-column>
                            <el-table-column label="投融资事件合同" align="center">
                            <template slot-scope="scope">
                                <a style="color:#F8B100" :href="scope.row.contactFileInfo?scope.row.contactFileInfo.fileUrl:''">{{scope.row.contactFileInfo?scope.row.contactFileInfo.fileName:'--'}}</a>
                            </template>
                        </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="editBtn(scope.row.id)" size="small" type="success">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                </div>
                <el-dialog center title="投融资信息" :visible.sync="dialogFormVisible">
                    <el-form :model="information" :rules="rules" ref="information">
                        <el-form-item  prop="financeLevel" label="融资轮次:" :label-width="formLabelWidth">
                            <el-select filterable v-model="information.financeLevel">
                                <el-option
                                v-for="item in financeArr"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                       <el-form-item prop="masterType" class="stock" label="股东名称：" :label-width="formLabelWidth">
                        <el-select filterable  v-model="information.masterType">
                            <el-option
                            v-for="item in masterArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                            <el-option
                            label="其他"
                            value="other">
                            </el-option>
                        </el-select>
                        <el-input
                            style="margin-top:20px"
                            v-if="information.masterType == 'other'"
                            v-model="information.otherMaster"
                            clearable>
                        </el-input>
                    </el-form-item>
                        <el-form-item prop="stockRate" label="股本占比：" :label-width="formLabelWidth">
                            <el-input
                                v-model="information.stockRate"
                                clearable>
                            </el-input><span style="margin-left:10px;">%</span>
                        </el-form-item>
                        <el-form-item prop="giveType" label="出资方式：" :label-width="formLabelWidth">
                            <el-select  filterable v-model="information.giveType">
                                <el-option
                                v-for="item in giveArr"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="giveNums" label="出资额：" :label-width="formLabelWidth">
                            <el-input
                                v-model="information.giveNums"
                                clearable>
                            </el-input><span style="margin-left:10px;">元</span>
                        </el-form-item>
                        <el-form-item prop="currentValue" label="本轮估值：" :label-width="formLabelWidth">
                            <el-input
                                v-model="information.currentValue"
                                clearable>  
                            </el-input><span style="margin-left:10px;">元</span>
                        </el-form-item>
                        <el-form-item  prop="financeDate" label="融资时间：" :label-width="formLabelWidth">
                            <el-date-picker
                                v-model="information.financeDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item  prop="contractFileId" label="合同文件:" :label-width="formLabelWidth">
                                <el-upload
                                    class="upload-demo"
                                    :action="upLoadUrl"
                                    :on-remove="handleRemove"
                                    multiple
                                    :limit="1"
                                    :on-success="handleFileSuccess"
                                    :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button :loading="btnState"  type="primary" @click="submitBtn('information')">{{btnState?'提交中':'提交'}}</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
import VueRouter from 'vue-router'
export default {
  data(){
    return{
      href:'',
      checkList:'是',
      date:'',
      dialogFormVisible:false,
      formLabelWidth:'150px',
      tableData: [],
      fileShowList:[],
      financeArr:[],
      masterArr:[],
      fileList: [],
      btnState:false,
      giveArr:[],
      id:'',
      information: {
        financeLevel:'',
        masterType:'',
        otherMaster:'',
        currentValue:'',
        stockRate:'',
        giveType:'',
        giveNums:'',
        financeDate:'',
        contractFileId:''
      },
      name:'',
      upLoadUrl:'',
      rules: {
            // financeLevel:[
            //     {required: true, message: '请选择融资轮次', trigger: 'change'  }
            // ],
            // masterType: [
            //     { required: true, message: '请选择股东名称', trigger: 'blur' }
            // ],
            // currentValue:[
            //     {required: true, message: '请输入本轮估值', trigger: 'change'  }
            // ],
            // stockRate :[
            //     {required: true, message: '请输入股本占比', trigger: 'change'  }
            // ],
            // stockRate :[
            //     {required: true, message: '请输入股本占比', trigger: 'change'  }
            // ],
            // giveType :[
            //     {required: true, message: '请输入出资方式', trigger: 'change'  }
            // ],
            // giveNums :[
            //     {required: true, message: '请输入出资额', trigger: 'change'  }
            // ],
            // financeDate :[
            //     {required: true, message: '请输入融资时间', trigger: 'change'  }
            // ]
     },
        num: 0,
        messageList: []
    }
  },
  components: {

  },  
  mounted(){
      let sessionId = common.getCookie('sessionId');
      this.upLoadUrl =CONSTANT.URL.SYS.ADMINUPLOAD+ '?sessionId='+sessionId;
      this.id = this.$router.currentRoute.query.id;
      this.name = this.$router.currentRoute.query.name;
      this.getProductPage()
      this.getFinanceArr()
      this.getMatserArr()
      this.giveTypeArr()
      this.getMessage()
      setInterval( () => {
          this.getMessage()
      }, 120000)
  },
  methods:{
      getMessage() {
          let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
          common.requestAjax(url, {}, {}, (data) => {
              if(data.status == 200) {
                  this.messageList = data.data.bussData;
                  this.showMarquee(this.num)
              }
          })
      },
      addBtn(){
          this.information={
            financeLevel:'',
            masterType:'',
            otherMaster:'',
            currentValue:'',
            stockRate:'',
            giveType:'',
            giveNums:'',
            financeDate:'',
            contractFileId:''
        }
        this.fileList = []
          this.dialogFormVisible = true;
      },
      editBtn(id){
          this.tableData.map((item)=>{
              if(item.id == id){
                  this.information = item
              }
          })
          if(this.information.otherMaster){
              this.information.masterType = 'other'
          }
          if(this.information.contactFileInfo){
              this.fileList = [{name:this.information.contactFileInfo.fileName,url:this.information.contactFileInfo.fileUrl}]
          }else{
              this.fileList = []
          }
          
          this.dialogFormVisible = true;
      },
        handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            this.information.contactFileInfo = '';
        },       
        handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.contractFileId = picItem.fileId;
                console.log(this.information)
            }
        },
      submitBtn(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.information.masterType == 'other'){
                    this.information.masterType = null;
                }else{
                    this.information.otherMaster = ''
                }
                let url = CONSTANT.URL.COMPANY.SAVESTOCKLIST;
                this.information.userId = this.id
                let param = JSON.stringify(this.information);
                this.btnState = true;
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.dialogFormVisible = false;
                        this.information={
                                financeLevel:'',
                                masterType:'',
                                otherMaster:'',
                                currentValue:'',
                                stockRate:'',
                                giveType:'',
                                giveNums:'',
                                financeDate:'',
                                contractFileId:''
                            }
                        this.btnState = false;
                        this.getProductPage()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                        this.btnState = false;
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
     },
      getFinanceArr(){
            let  url = CONSTANT.URL.SYS.LOADDICTIONARY,
                data = {},
                dataForm = {codeType:'finance_level'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.financeArr= res.data.bussData
                }else{
                
                }
            })
        },
        getMatserArr(){
            let  url =CONSTANT.URL.SYS.LOADDICTIONARY,
                data = {},
                dataForm = {codeType:'master_type'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.masterArr= res.data.bussData
                }else{
                
                }
            })
        },
        giveTypeArr(){
            let  url = CONSTANT.URL.SYS.LOADDICTIONARY,
                data = {},
                dataForm = {codeType:'give_type'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.giveArr= res.data.bussData
                }else{
                
                }
            })
        },
      getProductPage(){
            let  url = CONSTANT.URL.COMPANY.FINDSTOCKLIST,
                data = {},
                dataForm = {
                    pageIndex:1,
                    pageSize:100,
                    userId:this.id
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.tableData = res.data.bussData;
                    }else{
                    }
                })
        },
      showMarquee:function (num) {
          if (!this.messageList[0]) return
          this.messageList.push(this.messageList[0]);
          var max = this.messageList.length;
          var that = this;
          let marqueetimer =  setInterval(function(){
              num++;
              if(num>=max ){
                  num=0;
              }
              that.num=num*30;
          }, 2000);
      }
  },
  watch: {  
      $route(to, from) {  
        // this.$refs.left.activePath()
      }  
  }
}
</script>
<style lang="scss">

.equity-detail{
    .el-dialog__body{
        .el-form-item__error {
            top: 100%;
            left: 0%;
        }
    }
}
</style>

<style  lang="scss" scoped>
.message {
    display: block;
    position: relative;
    width: 60%;
    height: 30px;/*关键样式*/
    overflow: hidden;
}
.marquee_list{
    display: block;
    position: absolute;
    top:0;
    left: 0;
}
.marquee_top{transition: top 0.5s ;}/*关键样式*/
.marquee_list li{
    height: 30px;/*关键样式*/
    line-height: 30px;/*关键样式*/
    font-size: 14px;
    padding-left: 20px;
    background-color: #fff;
    a {
        color: #333;
    }
}
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.equity-detail{
    .el-dialog__body{
        .el-form-item__error {
            top: 100%;
            left: 0%;
        }
    }
    header {
        margin: 19px 0;
        font-size: 14px;
        color: #333;
        a {
            color: #999;
        }
    }
    .focus-pointer {
        font-size: 14px;
        height: 70px;
        line-height: 70px;
        background-color: #fff;
        padding-left: 18px;
        white-space: nowrap;
    }
}

.equity-wrap{
//   padding-top: 29px;
  header {
        margin: 19px 0;
        font-size: 14px;
        color: #333;
        a {
            color: #999;
        }
    }
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .el-table__row{
        td{
            height: 50px;
            padding: 0;
        }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        padding-bottom: 18px;
        padding-top: 10px;
        span{
            color: #111;
            font-weight: bold;
        }
        .btn{
            display: inline-block;
            width: 73px;
            height: 40px;
            margin-left: 41px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            } 
        }
      }

    }
  }
.el-button--primary{
        border-radius: 4px;
        -webkit-border-radius: 4px;
        background-color: #ED7018;
        border: 0PX;
        &:hover{
        background-color: #ED9000;
        transition:all .2s linear
        } 
}
  .el-dialog__body{
      .el-input{
          width: 300px;
      }
      .el-select{
            width: 300px;
        }
  }
}

a{
  text-decoration: none;
}
</style>